<template>
  <div class="app-container">
    <h2 style="text-align: center">添加历史事件</h2>

    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="事件基本信息" />
      <el-step title="事件经过" />
      <el-step title="事件总结" />
    </el-steps>

    <el-form label-width="120px" v-if="hasPerm('event.add')">
      <el-form-item label="事件名">
        <el-input
          v-model="history_event.eventTitle"
          placeholder=" 示例：1949年新中国成立"
          clearable
        />
      </el-form-item>

      <el-form-item label="开始时间">
        <el-date-picker
          v-model="history_event.startTime"
          type="date"
          placeholder="选择事件开始的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
          v-model="history_event.endTime"
          type="date"
          placeholder="选择事件结束的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <el-form-item label="湖南地级市">
        <el-select v-model="history_event.city" clearable placeholder="请选择" @change="cityChange">
          <el-option
            v-for="city in cities"
            :key="city.value"
            :label="city.label"
            :value="city.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input
          style="width: 300px"
          v-model="history_event.location"
          placeholder="请输入地点"
          clearable
          @change="convertLoc"
        />
        <position ref="position"></position>
      </el-form-item>

      <el-form-item label="经度">
        <el-input
          style="width: 220px"
          v-model="history_event.longitude"
          clearable
        />
      </el-form-item>

      <el-form-item label="纬度">
        <el-input
          style="width: 220px"
          v-model="history_event.latitude"
          clearable
        />
      </el-form-item>

      <el-form-item label="事件图片">
        <el-upload
          class="avatar-uploader"
          :action="BASE_API + '/gis/fileoss'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="history_event.eventImg"
            :src="history_event.eventImg"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item align="right">
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >{{ btuTitle }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import position from '../../components/Area/position'
import events from "@/api/event/events";
import city from '@/api/option/city'
export default {
  components: {
    position,
  },
  data() {
    return {
      history_event: {
        eventTitle: "", //事件标题
        startTime: null, //开始时间
        endTime: null, //结束时间
        city:'',//所属城市
        location: "", //地点
        longitude: "", //经度
        latitude: "", //纬度
        eventImg: "", //事件图片
      }, //历史事件
      BASE_API: process.env.BASE_API, // 接口API地址
      saveBtnDisabled: false, // 保存按钮是否禁用
      eventId: "", //事件id
      btuTitle: "保存并下一步",
      hasPermission: true, //是否有权限
      cities:[],//城市
    };
  },

  created() {
    this.getCities()
    if (this.$route.params && this.$route.params.id) {
      // params.id 中 id 和路由中的 占位符有关系
      this.eventId = this.$route.params.id;
      this.getEventInfo();
    }
    this.hasPermission = this.hasPerm("event.addDesc");
    if (!this.hasPermission) {
      this.btuTitle = "保存";
    }
  },
  methods: {
    // 获得所有的城市列表
    getCities(){
      city.getCities().then(res=>{
        const cities = res.data.cities
        cities.forEach(item => {
          this.cities.push({
            lable:item.id,
            value:item.city
          })
        });
      })
    },
    // 上传图片成功
    handleAvatarSuccess(res, file) {
      // 提示信息
      this.$message({
        type: "success",
        message: res.message,
      });
      this.history_event.eventImg = res.data.url;
    },
    // 上传图片之前
    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt1M = file.size / 1024 / 1024 < 10;
      console.log(file.type);
      if (isJPG !== "image/jpeg" && isJPG !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG 格式或者 PNG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传的图片大小不能超过 10MB!");
      }
      return isJPG && isLt1M;
    },
    saveEventInfo() {
      events.addEventInfo(this.history_event).then((res) => {
        // 提示信息
        this.$message({
          type: "success",
          message: res.message,
        });
        const id = res.data.eventId;

        if (this.hasPermission) {
          // 跳转到第二步
          this.$router.push({ path: "/event/description/" + id });
        } else {
          this.$router.push({ path: "/event/list" });
        }
      });
    },
    updateEventInfo() {
      events.updateEventInfo(this.history_event).then((res) => {
        // 提示信息
        this.$message({
          type: "success",
          message: res.message,
        });
        const id = this.eventId;
        if (this.hasPermission) {
          // 跳转到第二步
          this.$router.push({ path: "/event/description/" + id });
        } else {
          this.$router.push({ path: "/event/list" });
        }
      });
    },
    saveOrUpdate() {
      // 判断是添加还是修改
      if (!this.eventId) {
        // 添加
        this.saveEventInfo();
      } else {
        this.updateEventInfo();
      }
    },
    getEventInfo() {
      events.getEventInfo(this.eventId).then((res) => {
        this.history_event = res.data.historyEvent;
        if (
          this.history_event.videoSourceId &&
          this.history_event.videoOriginalName
        ) {
          this.goBackVideo = true;
        }

        var lat = this.history_event.latitude;
        var lng = this.history_event.longitude;
        if (lat && lng) {
          this.$refs.position.lat = lat;
          this.$refs.position.lng = lng;
          this.$refs.position.addOverlay(this.history_event.location);
        }
      });
    },
    convertLoc() {
      this.$refs.position.getInfo(this.history_event.location).then((res) => {
        this.history_event.latitude = res.lat;
        this.history_event.longitude = res.lng;
      });
    },
    cityChange(){
       this.$refs.position.city = this.history_event.city
    }
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
